<template>
	<!-- tableBar目标页面 -->
	<view class="goal">


		<view v-show="showEmpty">
			<u-empty text="你好像还没有任何目标吧" icon-size="152" font-size="40" margin-top="100" class="empty"></u-empty>
			<view class="tip">给一点目标自己把</view>
			<!-- <u-image></u-image> -->
			<navigator url="/pages/insidePages/setGoals/index">
				<view class="to-set-goal">定个小目标吧</view>
			</navigator>
		</view>

		<view v-show="!showEmpty" class="goal-list">
			<view
			v-for="(goal, index) in goalList"
			:key="index"
			class="goal-wrapper"
			:style="{backgroundImage: handleUnFinish(goal) ? 'url(https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free2/3ad4c030-24ea-11ea-9490-af8fd788c2a8.png)' : `url(${goal.sysGoal.coverPic})`}"
			@click="handleJump(goal)">
				<view class="task-information">
					<view class="task-titel">{{ goal.goalName }}</view>
					<view class="task-period">{{ goal.startTime | getDate}} 至 {{ goal.endTime | getDate }}</view>
					<view class="task-situation">{{ handleGoalStatu(goal) }}</view>
				</view>
				<view class="task-overview">
					<view class="task-aims">
						<view class="taks-aims-header">
							<u-icon name="order" size="32" class="icon"></u-icon>目标任务
						</view>
						<view class="task-aims-number">
							{{goal.goalName}}打卡达<text class="number">{{ goal.timesValue }}</text> 次数
						</view>
						<view v-if="hideTaskNumber(goal.goalName)" class="task-every-progress">
							每次{{ goal.goalName }}达 <text class="number">{{ goal.timeValue }}</text> {{handleText(goal)}}
						</view>
					</view>
					<view class="task-schedule">
						<view class="taks-aims-header">
							<text class="iconfont icon-daqia icon"></text>目标任务
						</view>
						<view class="task-aims-number succeeded">
							已成功打卡<text class="number"> {{ goal.userSignDonateCount }}</text>次数
						</view>
						<view v-if="goal.userActualDonateMoney" class="task-contribution-deposit">
							已贡献押金 <text class="number">{{ goal.userActualDonateMoney | getMoney }} </text> 元
						</view>
					</view>
					<view class="overview-separate"></view>
				</view>
			</view>
		</view>
		<!-- 加载完 -->
		<!-- <view v-show="pagination.totalCount >= goalList.length && !showEmpty" class="finished-loading">
			<u-divider>我是有底线的 凸^-^凸</u-divider>
		</view> -->
		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin"  open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUserDonateGoal
	} from '@/api/goal.js'
	import loginMixin from '@/utils/loginMixin.js'

	export default {

		mixins: [loginMixin],

		data() {
			return {
				showLoginDialog: false,
				goalList: [], // 目标列表
				notTargetTask: '坚持健身，坚持练书法，坚持绘画，学习烹饪',
				pagination: { // 分页参数
					totalCount: 0,
					startIndex: 0,
					size: 15
				}
			}
		},
		
		
		onLoad() {
			this.handleShowLogin()
			this.init()
		},

		// onShow() {
		// 	this.pagination.startIndex = 0
		// 	this.goalList = []
		// 	this.handleGetUserDonateGoal()
		// },

		computed: {
			// 显示没目标提示
			showEmpty() {
				return this.goalList.length === 0
			}
		},

		// 上拉加载
		onReachBottom() {
			if (this.pagination.totalCount >= this.goalList.length) return
			this.pagination.startIndex += 1
			this.handleGetUserDonateGoal()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.pagination.startIndex = 0
			this.goalList = []
			this.handleGetUserDonateGoal()
			uni.stopPullDownRefresh()
		},

		methods: {
			init() {
				this.handleGetUserDonateGoal()
			},
			
			handleShowLogin() {
				if (!this.user || !this.user.openId) {
					this.showLoginDialog = true
				}
			},
			
			// 获取目标列表
			async handleGetUserDonateGoal() {
				if (!this.user.openId) return
				const data = JSON.stringify({
					openId: this.user.openId,
					startIndex: this.pagination.startIndex,
					length: this.pagination.size
				})
				try {
					uni.showLoading({
					    title: '加载中'
					});
					const {
						resultData
					} = await getUserDonateGoal({
						data
					})
					this.pagination.totalCount = resultData.totalCount
					this.goalList = [...this.goalList, ...resultData.list]
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
				}

			},
			
			// 是否达到目标
			handleUnFinish(goal) {
				const createTime = goal.startTime
				const currentTime = new Date().getTime()
				const endTime = goal.endTime
				const userSignDonateCount = goal.userSignDonateCount // 已成功打卡
				const timesValue = goal.timesValue // 坚持目标打卡达到多少次
				const timeValue = goal.timeValue // 每次坚持目标达多少数量
				
				if (currentTime >= endTime && userSignDonateCount >= timesValue ) {
					return false
				} else if (currentTime >= endTime && userSignDonateCount < timesValue) {
					return true
				} else {
					return false
				}
			},
			
			// 补全目标
			handleText(goal) {
				return goal.goalName.includes('跑步') ? '公里' : goal.goalName.includes('练字') ? '字帖数量' : goal.goalName.includes('单词') ? '单词数量' : '次数'
			},
			
			// 目标状态
			handleGoalStatu(goal) {
				const createTime = goal.startTime
				const currentTime = new Date().getTime()
				const endTime = goal.endTime
				const userSignDonateCount = goal.userSignDonateCount // 已成功打卡
				const timesValue = goal.timesValue // 坚持目标打卡达到多少次
				const timeValue = goal.timeValue // 每次坚持目标达多少数量
				
				if (currentTime < endTime) {
					return '进行中'
				} else if (currentTime >= endTime && userSignDonateCount >= timesValue ) {
					return '已完成'
				} else if (currentTime >= endTime && userSignDonateCount < timesValue) {
					return '未达标'
				}
			},
			
			// 目标是否有次数
			hideTaskNumber(name) {
				return !this.notTargetTask.includes(name)
			},
			
			// 跳转目标打卡列表
			handleJump(goal) {
				uni.navigateTo({
					url:`/pages/goal/goalList?openId=${goal.openId}&userDonateId=${goal.userDonateId}`
				})
			}
		},

		filters: {
			// 过滤处理时间戳
			getDate(value) {
				const date = new Date(value)
				const month = date.getMonth() + 1 > 12 ? '01' : date.getMonth() + 1 > 9 ? date.getMonth() + 1 :
					`0${date.getMonth() + 1}`
				const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`
				return month + '-' + day
			},
			
			getMoney(money) {
				return money / 100
			}
		}
	}
</script>

<style lang="scss">
	.tip {
		margin-top: 55rpx;
		margin-bottom: 13rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.to-set-goal {
		width: 712rpx;
		height: 175rpx;
		margin: auto;
		background-image: url(https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/aafe60e0-e1a2-11e9-a3ed-05b4249b2ee6.png);
		background-size: 100%;
		background-repeat: no-repeat;
		line-height: 175rpx;
		text-align: center;
		color: #fff;
		font-size: 65rpx;
		letter-spacing: 20rpx;
	}

	.goal-list {
		padding: 0 24rpx;

		.goal-wrapper {
			height: 466rpx;
			position: relative;
			margin-bottom: 28rpx;
			border-radius: 8rpx;
			padding: 24rpx;
			border: 1px solid #ccc;
			// background-image: url(https://cdn.uviewui.com/uview/swiper/1.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.task-information {
				margin-top: 169rpx;
				text-align: center;
				color: #ffffff;

				.task-titel {
					margin-bottom: 8rpx;
					font-size: 32rpx;
				}

				.task-period {
					margin-bottom: 8rpx;
					font-size: 24rpx;
				}

				.task-situation {
					font-size: 24rpx;
				}
			}

			.task-overview {
				position: relative;
				display: flex;
				color: #fff;

				.overview-separate {
					position: absolute;
					top: 10%;
					left: 50%;
					width: 1px;
					height: 95%;
					background-color: #fff;
				}

				.task-aims {
					height: 190rpx;
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.task-schedule {
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.taks-aims-header {
					margin-bottom: 12rpx;
					text-align: center;
					font-size: 24rpx;

					.icon {
						margin-right: 12rpx;
					}
					
					.icon-daqia {
						font-size: 28rpx;
					}
				}

				.task-aims-number {
					margin-bottom: 24rpx;
					border-radius: 8rpx;
					padding: 16rpx 0;
					font-size: 24rpx;
					text-align: center;
					background-image: linear-gradient(to right, #a8151f, #ec7152);
				}

				.succeeded {
					background-image: linear-gradient(to right, #0950de, #149ee9);
				}

				.number {
					width: 40rpx;
					margin: 0 12rpx;
					text-underline: underline;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.task-every-progress {
					padding: 12rpx 0;
					border-radius: 8rpx;
					background-image: linear-gradient(to right, #a8151f, #ec7152);
					text-align: center;
					font-size: 20rpx;
				}
				
				.task-contribution-deposit {
					padding: 12rpx 0;
					border-radius: 8rpx;
					background-image: linear-gradient(to right, #07808c, #28bda6);
					text-align: center;
					font-size: 20rpx;
				}
			}
		}
	}

	.finished-loading {
		padding-bottom: 40rpx;
	}
	
	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;
	
		.tip {
			padding: 50rpx 0;
		}
	}
</style>
